<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<script>
  function serializeParams(params) {
    const parts = [];
    for (const [key, value] of Object.entries(params)) {
      parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
    }
    return parts.join("&");
  }
  function ajaxGetPromise({ url, params = {} }) {
    let p = new Promise(function (resolve, reject) {
      let xhr = new XMLHttpRequest();
      let query = serializeParams(params);
      xhr.open("GET", `${url}?${query}`);
      xhr.send();
      xhr.responseType = "json";
      xhr.onload = function () {
        if (xhr.status == 200) {
          let obj = JSON.parse(xhr.responseText);
          let str = "";
          pj();
          document.querySelector(".list").innerHTML = str;
        }
      };
    });
  }
  function pj() {
    obj.data.forEach((v) => {
      v;
      str += ` <div class="item">
                        <img src="${v.image}"/>
                        <div>${v.store_name}</div>
                        <div>${v.price}</div>
                    </div>`;
    });
  }
  ajaxGetPromise({ url, params: {} }).then((r) => {
    r;
  });
</script>
